import React, {Component} from 'react'

import CustomNavigator from './com/custom-navigator/'

import {
    Navigator,
    Platform,
    Text,
    StyleSheet
} from 'react-native'

import DemoPage from './page/demo'
import OneTabBar from './page/OneTabBar'
import Constants from './Constants'

export default class App extends Component {
    static propTypes = {
        rn_page: React.PropTypes.string.isRequired
    };

    configureScene() {
        if (Platform.OS === 'android') {
            return Navigator.SceneConfigs.FloatFromBottomAndroid;
        }
        return {
            ...Navigator.SceneConfigs.HorizontalSwipeJump,
            gestures: null
        }
    }

    renderScene(route, navigator) {
        switch (route.name) {
            case '首页':
            default:
                return (
                    <OneTabBar {...route.params} navigator={navigator}/>
                )
        }
    }

    routeMapper() {
        return {
            LeftButton: () => {
            },
            RightButton: () => {
            },
            Title: (route) => {
                let navTitleStyle = Platform.OS === 'android' ? style.navTitleAndroid : style.navTitleIOS;
                return (<Text style={navTitleStyle}>{route.name}</Text>)
            }
        }
    }

    render() {
        return (
            <CustomNavigator
                initRoute={{
                    name: this.props.rn_page,
                    params: {...this.props}
                }}
                configureScene={this.configureScene}
                renderScene={this.renderScene}
                routeMapper={this.routeMapper}
            />
        )
    }
}

const FONTCOLOR = 'white';

const style = StyleSheet.create({
    navBtn: {
        fontSize: 15,
        marginTop: 13,
        marginLeft: 8,
        height: 50,
        color: FONTCOLOR
    },
    navTitleAndroid: {
        color: FONTCOLOR,
        fontSize: 20,
        position: 'absolute',
        top: 15,
        left: 0,
        right: 60,
        textAlign: 'center'
    },
    navTitleIOS: {
        color: FONTCOLOR,
        fontSize: 20,
        position: 'absolute',
        top: 8,
        left: 0,
        right: 0,
        textAlign: 'center'
    }
});